<template>
	<view>
		<u-navbar title="我的订单" placeholder :autoBack="true" leftIconColor="#E6A5B4" bgColor="#00000000"
			:titleStyle="titleStyle">
		</u-navbar>
		<u-tabs :list="tabList" lineColor="#E6A5B4" :scrollable="false" :activeStyle="activeStyle"
			:inactiveStyle="inactiveStyle" @click="onSelectClick" />
		<view class="listV">
			<scroll-view v-if="orderList.length>0" style="height: 80vh;" :scroll-y="true" @scroll="onScroll"
				:scroll-with-animation="true" :refresher-enabled="true" :refresher-triggered="triggered"
				@refresherrefresh="onDataList" refresher-default-style="white" @scrolltolower="scrolltolower">

				<view @click="onItemClick(item)" class="orderitemV" v-for="(item,key) in orderList" :key="key">
					<image class="image" :src="item.image" mode="aspectFill"></image>
					<view class="itemRightV">
						<view class="itemTv1">{{item.title}}</view>
						<view class="itemTv2">{{item.memo}}</view>
						<view class="moneyV">
							<view class="itemTv3">实付款：</view>
							<view class="itemTv4">{{item.total_money}}</view>
						</view>
						<view class="statusV">
							<view @click.stop="onCancelClick(item)" v-if="item.status!=-1" class="itemTv5">取消订单</view>
							<view @click.stop="onPayClick(item)" v-if="item.status==0" class="itemTv6">待支付</view>
						</view>
					</view>
				</view>

			</scroll-view>
			<view v-if="orderList.length==0"
				style="justify-content: center; align-items: center; display: flex; height: 50vh; color: #8D8D8D;">
				暂无订单
			</view>
		</view>

		<u-modal @confirm="onCancel()" @cancel="showCancel=false" :show="showCancel" :showCancelButton="true"
			content="确定要取消订单吗？"></u-modal>

		<u-modal @confirm="onPay()" @cancel="showPay=false" :show="showPay" :showCancelButton="true"
			content="确定要支付订单吗？"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					"color": "#ffffff"
				},
				activeStyle: {
					"color": "#E6A5B4D",
					"font-size": "34rpx"
				},
				inactiveStyle: {
					"color": "#8D8D8D",
					"font-size": "32rpx"
				},
				tabList: [{
					name: '全部' //9
				}, {
					name: '待付款' //0
				}, {
					name: '已付款' //1
				}, {
					name: '已取消' //-1
				}],
				orderList: [],
				mPage: 1,
				scrollTop: 0,
				triggered: false,
				mStatus: 9, //1 已付款 0 代付款 -1已取消 9全部
				showCancel: false,
				showPay: false,
				itemId: '',
			}
		},
		onLoad() {
			this.getOrderList();
		},
		methods: {
			onSelectClick(e) {
				let name = e.name;
				if (name == "待付款") {
					this.mStatus = 0
					this.mPage = 1
					this.getOrderList()
				} else if (name == "已付款") {
					this.mStatus = 1
					this.mPage = 1
					this.getOrderList()
				} else if (name == "已取消") {
					this.mStatus = -1
					this.mPage = 1
					this.getOrderList()
				} else if (name == "全部") {
					this.mStatus = 9
					this.mPage = 1
					this.getOrderList()
				}
			},
			onDataList() {
				if (this.scrollTop == 0) {
					this.triggered = true;
					this.mPage = 1
					this.getOrderList()
				}
			},
			scrolltolower() { //上拉加载
				this.mPage++
				this.getOrderList()
			},
			onScroll(e) {
				this.scrollTop = e.detail.scrollTop
			},
			getOrderList() {
				this.$api.getOrderList({
					status: this.mStatus,
					page: this.mPage
				}).then((res) => {
					if (this.mPage == 1) {
						this.orderList = res.list;
					} else {
						this.orderList.push(...res.list)
					}
					this.triggered = false;
				}).catch((e) => {
					this.triggered = false;
				})
			},
			onItemClick(item) {
				this.$u.route({
					url: '/mine/me/OrderDetails',
					params: {
						id: item.id,
					}
				})
			},
			onCancelClick(item) {
				this.showCancel = true;
				this.itemId = item.id;
			},
			onPayClick(item) {
				this.showPay = true;
				this.itemId = item.id;
			},
			onCancel() {
				uni.showLoading({
					title: '请稍后'
				})
				this.$api.cancelMyOrder({
					order_id: this.itemId,
				}).then((res) => {
					uni.hideLoading();
					this.mPage = 1;
					this.getOrderList();
					this.showCancel = false;
				}).catch((e) => {
					uni.hideLoading();
					this.showCancel = false;
					uni.$u.toast(e.msg === undefined ? "请求失败" : e.msg)
				})
			},
			onPay() {
				uni.showLoading({
					title: '请稍后'
				})
				this.$api.miNiPay({
					order_id: this.itemId,
				}).then((res) => {
					uni.hideLoading();
					this.showPay = false;
					this.payOrder(res);
				}).catch((e) => {
					uni.hideLoading();
					this.showPay = false;
					uni.$u.toast(e.msg === undefined ? "请求失败" : e.msg)
				})
			},
			payOrder(payData) {
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payData.timeStamp,
					nonceStr: payData.nonceStr,
					package: payData.package,
					signType: payData.signType,
					paySign: payData.paySign,
					success: function(res) {
						this.getOrderList();
					},
					fail: function(err) {
						uni.$u.toast("支付失败");
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.listV {
		background-color: #FFFFFF;
		height: 83vh;
	}

	.orderitemV {
		border-radius: 10rpx;
		background: rgba(61, 61, 61, 0.39);
		margin-left: 30rpx;
		margin-right: 30rpx;
		display: flex;
		padding: 20rpx;
		margin-top: 20rpx;
	}

	.image {
		width: 180rpx;
		height: 150rpx;
		border-radius: 10rpx;
	}

	.itemRightV {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
	}

	.itemTv1 {
		font-size: 30rpx;
		color: #ffffff;
	}

	.itemTv2 {
		font-size: 25rpx;
		color: #ffffff;
		margin-top: 10rpx;
	}

	.moneyV {
		display: flex;
		justify-content: flex-end;
		align-items: baseline;
		margin-top: 10rpx;
	}

	.itemTv3 {
		color: #999999;
		font-size: 25rpx;
	}

	.itemTv4 {
		color: #fff;
		font-size: 28rpx;
	}

	.statusV {
		display: flex;
		justify-content: flex-end;
		margin-top: 20rpx;
	}

	.itemTv5 {
		width: 148rpx;
		height: 48rpx;
		border-radius: 26rpx;
		border: 1rpx solid #999999;
		color: #999999;
		font-size: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.itemTv6 {
		width: 148rpx;
		height: 48rpx;
		border-radius: 26rpx;
		border: 1rpx solid #D5FF45;
		color: #D5FF45;
		font-size: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10rpx;
	}
</style>
